<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :lock-scroll="false"
    :visible.sync="visible"
  >
    <!--  <div class="mod-config"> -->
    <el-form
      v-loading="loading"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      class="alt_form"
      label-width="80px"
    >
      <el-form-item label="类型名称" prop="typeName">
        <el-input
          v-model="dataForm.typeName"
          placeholder="类型名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="字典分类" prop="type">
        <el-input v-model="dataForm.type" placeholder="字典分类"></el-input>
      </el-form-item>
      <el-form-item label="值" prop="value">
        <el-input v-model="dataForm.value" placeholder="值"></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="name">
        <el-input v-model="dataForm.name" placeholder="标签"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="description">
        <el-input v-model="dataForm.description" placeholder="备注"></el-input>
      </el-form-item>

      <el-form-item label="序号" prop="seq">
        <el-input-number
          v-model="dataForm.seq"
          controls-position="right"
          :min="0"
          label="排序号"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="状态" prop="enable">
        <el-switch
          v-model="dataForm.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用"
          inactive-text="不启用"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <div class="mod-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button :disabled="loading" type="primary" @click="dataFormSubmit()"
        >确定</el-button
      >
    </div>
    <!--  </div> -->
  </el-dialog>
</template>

<script>
import { getById , saveOrUpdate } from '@/api/sys/dict'
export default {
  data() {
    return {
      loading: false,
      visible: false,
      dataForm: {
        id: 0,
        value: "",
        name: "",
        type: "",
        description: "" ,
        typeName: "",
        seq: 0,
        delFlag: "",
        enable: true
      },
      dataRule: {
        value: [{ required: true, message: "值不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "标签不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "字典分类不能为空", trigger: "blur" }
        ],
        typeName: [
          { required: true, message: "类型名称不能为空", trigger: "blur" }
        ],
        seq: [{ required: true, message: "序号不能为空", trigger: "blur" }]
      }
    };
  },
  // activated () {
  //   let id= this.$route.query.id
  //   this.init(id)
  // },
  methods: {
    init(id, type, typeName) {
      this.dataForm.id = id || 0;
      this.loading = false;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          
          getById(this.dataForm.id).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.value = data.data.value;
              this.dataForm.name = data.data.name;
              this.dataForm.type = data.data.type;
              this.dataForm.typeName = data.data.typeName;
              this.dataForm.description = data.data.description;
              this.dataForm.seq = data.data.seq;
              this.dataForm.enable = data.data.deleteFlag == 0;
            }
          });
        } else if (type || typeName) {
          this.dataForm.type = type;
          this.dataForm.typeName = typeName;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.loading = true;
           
          const data_ = {
              id: this.dataForm.id || undefined,
              value: this.dataForm.value,
              name: this.dataForm.name,
              type: this.dataForm.type,
              typeName: this.dataForm.typeName,
              description: this.dataForm.description,
              seq: this.dataForm.seq,
              deleteFlag: this.dataForm.enable ? 0 : 1
            }

          saveOrUpdate(data_).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1000
                });

                this.visible = false;
                this.$emit("refreshDataList");
              } else {
                this.$message.error(data.msg);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    }
  }
};
</script>
